<template>
    <div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="新房" name="newhouse">
            <h2 v-if="focusList.length === 0">暂无预约</h2>
            <el-row v-for="item in focusList" :key = "item.id">
                 <el-col style="width:80%;float:left" v-if="item.resourceType==1" @click.native="info(item.houseId,item.resourceType)" >
              <el-row style="height: 150px;padding-top:20px;cursor:pointer;border-bottom: 1px #DCDFE6 solid">
               <el-col :span="4" style="height: 100%;">
              <el-row style="height: 90%;">
                <el-image :src="item.pic" style="height: 100%;"></el-image>
              </el-row>
            </el-col>
               <el-col :span="16">
              <el-row>
                <h2>{{item.title}}</h2>
              </el-row>
              <el-row class="crow">
                <span>经纪人ID：{{item.agentId}}</span>
              </el-row>
              <el-row class="crow">
                <span>经纪人姓名：{{item.agentname}}</span>
              </el-row>
              <el-row style="float:right">
                <span>预约时间：{{item.orderDate | dateParse}}</span>
              </el-row>
            </el-col>

            
              </el-row>
                 </el-col>
                <el-col style="width:20%;float:right;"  v-if="item.resourceType==1">
            <el-button type="success" @click="send(item.id,item.status,item.intentions,item.title)" style="margin: 10px;">{{item.status==1?'取消预约':'满意支付意向金'}}</el-button>
               </el-col>
            </el-row>
        <el-pagination
        @size-change="fetchData"
        @current-change="fetchData"
        :current-page.sync="currentPage"
        :page-sizes="[5,10,20]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination> 
        </el-tab-pane>
        <el-tab-pane label="二手房" name="oldhouse">
          <h2 v-if="focusList.length === 0">暂无预约</h2>
          <el-row v-for="item in focusList" :key = "item.id">
                 <el-col style="width:80%;float:left" v-if="item.resourceType==2" @click.native="info(item.houseId,item.resourceType)">
              <el-row style="height: 150px;padding-top:20px;cursor:pointer;border-bottom: 1px #DCDFE6 solid">
               <el-col :span="4" style="height: 100%;">
              <el-row style="height: 90%;">
                <el-image :src="item.pic" style="height: 100%;"></el-image>
              </el-row>
            </el-col>
               <el-col :span="16">
              <el-row>
                <h2>{{item.title}}</h2>
              </el-row>
              <el-row class="crow">
                <span>经纪人ID：{{item.agentId}}</span>
              </el-row>
              <el-row class="crow">
                <span>经纪人姓名：{{item.agentname}}</span>
              </el-row>
              <el-row style="float:right">
                <span>预约时间：{{item.orderDate | dateParse}}</span>
              </el-row>
            </el-col>

            
              </el-row>
                 </el-col>
                <el-col style="width:20%;float:right;"  v-if="item.resourceType==2">
            <el-button type="success" @click="send(item.id,item.status,item.intentions,item.title)" style="margin: 10px;">{{item.status==1?'取消预约':'满意支付意向金'}}</el-button>
               </el-col>
            </el-row>
        <el-pagination
        @size-change="fetchData"
        @current-change="fetchData"
        :current-page.sync="currentPage"
        :page-sizes="[5,10,20]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination> 
        </el-tab-pane>
        <!-- <el-tab-pane label="二手房" name="oldhouse">
          <h2 v-if="focusList.length === 0">暂无预约</h2>
          <el-row v-for="item in focusList" :key = "item.id">
            <el-row>
              <h2 @click="info(item.id)">{{item.houseId}}
              </h2>
            </el-row>
          </el-row>
        </el-tab-pane> -->
        <el-tab-pane label="租房" name="renthouse">
          <h2 v-if="focusList.length === 0">暂无预约</h2>
          <el-row v-for="item in focusList" :key = "item.id">
                 <el-col style="width:80%;float:left" v-if="item.resourceType==3" @click.native="info(item.houseId,item.resourceType)">
              <el-row style="height: 150px;padding-top:20px;cursor:pointer;border-bottom: 1px #DCDFE6 solid">
               <el-col :span="4" style="height: 100%;">
              <el-row style="height: 90%;">
                <el-image :src="item.pic" style="height: 100%;"></el-image>
              </el-row>
            </el-col>
               <el-col :span="16">
              <el-row>
                <h2>{{item.title}}</h2>
              </el-row>
              <el-row class="crow">
                <span>经纪人ID：{{item.agentId}}</span>
              </el-row>
              <el-row class="crow">
                <span>经纪人姓名：{{item.agentname}}</span>
              </el-row>
              <el-row style="float:right">
                <span>预约时间：{{item.orderDate | dateParse}}</span>
              </el-row>
            </el-col>

            
              </el-row>
                 </el-col>
                <el-col style="width:20%;float:right;"  v-if="item.resourceType==3">
            <el-button type="success" @click="send(item.id,item.status,item.intentions,item.title)" style="margin: 10px;">{{item.status==1?'取消预约':'满意支付意向金'}}</el-button>
               </el-col>
            </el-row>
        <el-pagination
        @size-change="fetchData"
        @current-change="fetchData"
        :current-page.sync="currentPage"
        :page-sizes="[5,10,20]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination> 
        </el-tab-pane>
      </el-tabs>
    </div>
</template>

<script>
  import userApi from '@/api/user'
   import agentApi from '@/api/agent';
  import { mapGetters } from 'vuex'
  import newHouseApi from "@/api/newhouse";
    export default {
        name: "house",
        computed: {
            ...mapGetters([
                'name',
                'uid'
            ])

        },
        data() {
            return {
                focusList:[],
                total: 0, // 总记录数
                currentPage: 1, // 当前页
                pageSize: 10, // 每页大小
                pojo:{},
                htype:'newhouse',
                activeName: 'newhouse'
            }
        },
        created(){
          this.fetchData()
        },
       
        methods:{

          
         
            fetchData(){
               userApi. getFocus(this.currentPage, this.pageSize,this.uid).then(response=>{
                 response.list.forEach(order => {
                  //  console.log(order)
                  this.focusList.push(order)
                 });
                 console.log(this.focusList);
                this.total= response.pagination.total;

               })
            },
            handleClick(tab, event) {
                this.htype =tab.name
                // this.focusList = []
                // this.fetchData()
            },
            info(id,resourceType) {
                if(resourceType==1){

                  this.$router.push({path:'/newHouse/info/'+id})
                }
                else if(resourceType==2){

                  this.$router.push({path:'/oldHouse/info/'+id})
                }else{

                  this.$router.push({path:'/rentHouse/info/'+id})
                }
                // console.log(id,resourceType)
                // this.$router.push({path:'/newHouse/info/'+id})
            },
            send(id,status,intentions,title){
              
              if(status==1){
                   let order={id:id}
                 agentApi. removeOrder(order).then(response=>{

                })
                for(let i=0;i<this.focusList.length;i++){

                    if(this.focusList[i].id==id){
                        this.focusList.splice(i,1);
                    }
                }
                
              }else{

                   let order={id:id,intentions:intentions,title:title}
               
                  console.log(order)
                  userApi.payOrder(order).then(response=>{
                      // 添加之前先删除一下，如果单页面，页面不刷新，添加进去的内容会一直保留在页面中，二次调用form表单会出错
                const divForm = document.getElementsByTagName('div')
                if (divForm.length) {
                    document.body.removeChild(divForm[0])
                }
                const div = document.createElement('div')
                div.innerHTML = response // data就是接口返回的form 表单字符串
                document.body.appendChild(div)
                document.forms[0].setAttribute('target', '_blank') // 新开窗口跳转
                document.forms[0].submit()
                  })

              }
              
              
              
            }

        }
    }
</script>

<style scoped>

</style>
